<!DOCTYPE html>
<html>
<head>
    <!-- <meta charset="utf-8">-->
    <meta http-equiv="content-Type" content="text/html;charset=utf-8">
    <title>HTML基础</title>
</head>
<body>
<h1>HTML目录</h1>
<ul>
    <li><a href="#base">HTML介绍</a></li>
    <li><a href="#image">图像标签和超链接</a></li>
    <li><a href="#table">跳转->HTML表格</a></li>
    <li><a href="#from">表单</a></li>
    <li><a href="#div-span">div和span</a></li>
</ul>


<h2><a href="#" name="base">HTML介绍</a></h2>
<pre>
HTML( Hypertext Markup Language) 超文本标记语言。
        HTML特点:
        1) HTML不需要编译,直接由浏览器执行
        2) HTML文件是一个文本文件
        3) HTML文件必须使用html或htm为文件名后缀
        4) HTML大小写不敏感;HTML和html一样
HTML发展历史:
    1993(IETF)HTML 1.0 --> 1995(W3C)HTML 2.0 --> 1996(W3C) HTML 3.2 -->1997(W3C)HTML 4.0
    --> 1999(W3C)HTML 4.0.1 -->2000(W3C)XHTML 1.0 -->2001(W3C)XHTML 1.1 -->XHTML2.0?
    -->2004(WHATWG)HTML5草案 -->2008(合并)HTML5正式版 -->2014 HTML5定稿
HTML基本结构:
        &lt;html&gt;
            &lt;head&gt;
                &lt;title&gt;标题&lt;/title&gt;
            &lt;/head&gt;
            &lt;body bgcolor="red"&gt;网页主体内容&lt;/body&gt;
        &lt;/html&gt;
</pre>
<h2> HTML属性 </h2>
<pre>
    语法: &lt;标签名 属性名1="xx" 属性名2="xx" ... &gt;...&lt;/标签名&gt;
    bgcolor="grey" 背景颜色=灰色
</pre>
<h3>DOCTYPE 文档类型声明</h3>
<pre>
    &lt;!DOCTYPE&gt;声明必须放在HTML文档第一行;
    &lt;!DOCTYPE&gt;声明不是HTML标签
</pre>
<h2>文字和段落标签</h2>
<sub>下标</sub>正常 <sup>上标</sup>
<pre>
    标题标签:&lt;h1&gt;&lt;/h1&gt;~&lt;h6&gt;&lt;/h6&gt;
    段落标签:&lt;p&gt;&lt;/p&gt;
    align对齐属性值: left:左对齐  right:右对齐    center:居中   justify:两端对齐
    换行标签: &lt;br/&gt;  文字倾斜: &lt;i&gt;&lt;i/&gt;    、 &lt;em&gt;&lt;/em&gt;
    加粗: &lt;b&gt;&lt;b/&gt;    、 &lt;strong&gt;&lt;/strong&gt;
    下标: &lt;sub&gt;     上标: &lt;sup&gt;     一行下划线: &lt;hr/&gt;
    特殊符号: &reg;    &copy;    &trade;    空格&nbsp;空格
</pre>

<h3>列表</h3>
无序列表:(type属性值 disc=圆点 square=正方形 circle=空心圆)
<ul type="square">
    <li>xx</li>
    <li>cc</li>
    <li>yy</li>
</ul>
有序了列表:(type属性值 1=数字1,2.. a=小写字母 A=大写字母 i=小写罗马数字 I=大写罗马数字)
<ol>
    <li>有序列表xx</li>
    <li>有序列表yy</li>
    <li>有序列表zz</li>
</ol>
<hr/>
自定义列表
<dl>
    <dt>定义列表项xx</dt>
    <dd>列表项描述xx</dd>
</dl>
<hr color="red"/>
<h2><a href="#" name="image">图像标签和超链接</a></h2>
<pre>
    <b>语法: &lt;img src="xx" alt="xx" /&gt;</b> img标签的属性: src=图片的url   alt=图片不存在时显示的文字   height=图片高  width=图像宽
    <b>语法: &lt;a href="xx"&gt;内容&lt;a/&gt;</b>  href:链接地址，可以是内部或外部链接; href=# 表示空链接
        a标签的属性:  href=链接地址  target=链接的目标窗口 _self(当前窗口)、_blank(新开一个窗口)、_top、_parent
                    title=链接提示文字    name=链接命名(锚链接)
    <b>锚链接(同一个页面)</b>
    &lt;a href="#锚名1"&gt;目录1&lt;/a&gt;
    &lt;a href="..." name="锚名1"&gt;内容&lt;/a&gt;
    <b>锚链接(不同页面)</b>
    网页1: &lt;a href="网页名称#锚名"&gt;目录1&lt;/a&gt;
    网页2: &lt;a href="..." name="锚名"&gt;内容&lt;/a&gt;

    <b>超链接扩展--电子邮件</b>  语法: &lt;a&gt; href="mailto:邮件地址" &gt;给xx发送邮件&lt;/a&gt;
    <b>超链接扩展--文件下载</b>  语法: &lt;a&gt; href="下载文件地址" &gt;下载文件&lt;/a&gt;


</pre>
<hr color="green"/>
<h2><a href="#" name="table">HTML表格</a></h2>
<pre>
    标题: &lt;caption&gt;  表头: &lt;th&gt;
    表格划分为三部分: thead(表格头)  tbody(表格数据本体)  tfoot(表格脚)
    &lt;tr&gt; &lt;th&gt; &lt;td&gt; &lt;thead&gt; &lt;tbody&gt; &lt;tfoot&gt;标签属性:
        align:left、center、right、justify、char 行内容的水平对齐
        valign:top、middle、bottom、baseline 行内容的垂直对齐
        bgColor:rgb(x,x,x)、#xxxxxxx、colorName 行的背景颜色

    &lt;td colspan="2"&gt;跨2列&lt;/td&gt;   &lt;th colspan="2"&gt;跨2列&lt;/th&gt;
    &lt;td rowspan="2"&gt;跨2行&lt;/td&gt;

</pre>
<table border="1" bgcolor="#f2f2f2" cellpadding="1" cellspacing="1" align="center">
    <caption>&lt;table&gt;表格属性</caption>
    <thead>
    <tr>
        <th>属性</th>
        <th>值</th>
        <th>描述</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>width</td>
        <td>pixels、%</td>
        <td>表格宽度</td>
    </tr>
    <tr>
        <td>align</td>
        <td>left、center、right</td>
        <td>表格相对周围元素对齐方式</td>
    </tr>
    <tr>
        <td>border</td>
        <td>pixels</td>
        <td>规定表格边框的宽度</td>
    </tr>
    <tr>
        <td>BgColor</td>
        <td>rgb(x,x,x)、#xxxxxx、ColorName</td>
        <td>表格背景颜色</td>
    </tr>
    <tr>
        <td>CellPadding</td>
        <td>Pixels、%</td>
        <td>单元边沿与其内容之间的空白</td>
    </tr>
    <tr>
        <td>cellSpacing</td>
        <td>Pixels、%</td>
        <td>单元格之间的空白</td>
    </tr>
    <tr>
        <td>frame</td>
        <td>属性值</td>
        <td>
            <pre>规定外侧边框的哪个部分是可见的; void:不显示  above:上  below:下
                hsides:上下 vsides:左右  lhs:左  rhs:右  box:上下左右  border:上下左右</pre>
        </td>
    </tr>
    <tr>
        <td>rules</td>
        <td>属性值</td>
        <td>
            <pre>规定内侧边框的哪个部分是可见的  none:没有线条  groups:位于行组和列祖之间的线条
                rows:位于行之间的线条   cols:位于列之间的线条   all:位于行和列之间的线条</pre>
        </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="2" align="center">合并2行</td>
        <td rowspan="2" align="center">合并2列</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    </tfoot>
</table>
<hr color="yellow"/>
<h2><a href="#" name="from">表单</a></h2>
<pre>
    <b>语法: &lt;form  action="xx"  method="xx" name="xx" &gt; 表单元素 &lt;/form&gt;</b>
    <i><b>
        form标签属性说明:
            action:URL,表单提交时向何处发送表单数据
            method:get/post 设置表单以何种方式发送到指定页面
            name:表单名称
            target:_blank/_self/_parent/_top 在何处打开action URL
            enctype: application/x-www-form-urlencoded 或 multipart/form-data 或 text/plain  发送表单数据之前如何对其编码

    </b></i>
    表单元素: input:输入   select: 菜单和列表    option:菜单和列表子项   textarea:文字域   optgroup:菜单和列表子项分组
input标签语法: &lt;input type="类型" name="xx" ... /&gt;
    <b>input标签type取值: text:文本  password:密码  file:文件  checkbox:复选框  radio:单选   button:按钮  submit:提交   reset:重置  hidden:隐藏域   image:图片</b>
    <i>input=text(文本框) 的属性说明:  name:文本名称   maxLength:允许输入的最长字符  size:文本框的宽度,以字符为单位,默认20个字符   value:文本框的默认值   placeholder:用户输入的提示信息  </i>
    图像域语法(type=image): &lt;input type="image" name="xx" src="imageUrl" /&gt;

select标签属性: name:设置下拉菜单和列表名称    multiple:设置可以选择多个选项     size:设置列表中可见选项的数目
option标签属性: selected:设置选项初始选中状态      value:发送给服务器的值
    <b>多行文本域textarea语法: &lt;textarea name=".." rows="xx" cols="xx" xx &gt;内容&lt;/textarea&gt;
        textarea的属性说明: placeholder:设置提示信息   rows:可见行数   cols:可见列数  name:设置文本域的名称
    </b>
</pre>
<h4 align="center">表单demo -- 注册信息</h4>
<form>
    <table width="500px" bgcolor="#ffe4c4" align="center">
        <tr>
            <td align="right">姓名:</td>
            <td align="left"><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名" /></td>
        </tr>
        <tr>
            <td align="right">邮箱:</td>
            <td align="left"><input type="text" name="email" value="@163.com" /></td>
        </tr>
        <tr>
            <td align="right">密码:</td>
            <td align="left"><input type="password" name="psw" size="25" maxlength="6" placeholder="请输入密码" /></td>
        </tr>
        <tr>
            <td align="right">确认密码:</td>
            <td align="left"><input type="password" name="psw_confirm" size="25" maxlength="6" placeholder="请再次输入密码" /></td>
        </tr>
        <tr>
            <td align="right">上传照片:</td>
            <td align="left"><input type="file"  name="file" /></td>
        </tr>
        <tr>
            <td align="right">性别:</td>
            <td align="left">
                男<input type="radio" name="sex" value="man" />
                女<input type="radio" name="sex" value="woman" />
                保密<input type="radio" name="sex" value="bx" checked/>
            </td>
        </tr>
        <tr>
            <td align="right">爱好:</td>
            <td align="left">
                读书<input type="checkbox" name="ah" value="read"/>
                跳舞<input type="checkbox" name="ah" value="dance"/>
                唱歌<input type="checkbox" name="ah" value="sing" checked/>
                跑步<input type="checkbox" name="ah" value="run" checked/>
            </td>
        </tr>
        <tr>
            <td align="right">城市:</td>
            <td align="left">
                <select name="city">
                    <option >--请选择--</option>
                    <option value="bj">北京</option>
                    <option value="tj">天津</option>
                    <option value="hf">合肥</option>
                    <option value="gz">广州</option>
                </select>
                <select name="city2" size="4" multiple>
                    <option value="bj">北京</option>
                    <option value="tj">天津</option>
                    <option value="hf">合肥</option>
                    <option value="gz">广州</option>
                    <option value="sz">深圳</option>
                    <option value="zh" selected>珠海</option>
                </select>
                <select name="city3" size="4">
                    <option>--请选择(分组)--</option>
                    <optgroup label="华北">
                        <option value="bj">北京</option>
                        <option value="tj">天津</option>
                    </optgroup>
                    <optgroup label="华北">
                        <option value="hf">合肥</option>
                        <option value="gz">广州</option>
                        <option value="sz">深圳</option>
                        <option value="zh" >珠海</option>
                    </optgroup>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right">简介:</td>
            <td align="left">
                <textarea name="jj" placeholder="请输入简介" rows="4" cols="10"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="button" value="按钮"/>
                <input type="submit" value="submit"/>
                <input type="reset" value="reset"/>
            </td>
        </tr>
    </table>
</form>
<h2> <a href="#" name="div-span">div和span</a></h2>
<pre>
    div标签是一个区块容器标记, &lt;div&gt;&lt;/div&gt;之间是一个容器,可以包含段落、表格、图片等各种HTML元素。
    块级标签(占据一行,换行): div、ul、ol、li、dl、dt、dd、h1~h6、p、form、hr、...
    行内标签(在一行,不换行): b、em、img、input、a、sup、sub、textarea、span、...
</pre>


</body>
</html>